<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Computer World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="themes/jquery.mobile-1.3.2.min.css" />
    <link rel="stylesheet" type="text/css" href="shared/jqm-datebox.min.css" />
    <link rel="stylesheet" type="text/css" href="themes/index.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.settings.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="cordova_custom_plugins.js"></script>
    <script type="text/javascript" src="js/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="js/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="js/jqm-datebox.mode.datebox.min.js"></script>
    <script type="text/javascript" src="js/jqm-datebox-1.1.0.mode.flipbox.js"></script>
    <script type="text/javascript" src="js/jquery.mobile.datebox.i18n.vi.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/chonngay.js"></script>
    <script type="text/javascript" src="js/doingay.js"></script>
    <script type="text/javascript" src="js/sukien.js"></script>
</head>
<body>

    <!-- Main page -->

    <div data-role="page" id="home" data-theme="c">
        <div data-role="panel" id="navpanel" data-display="overlay" data-position="left">
            <div data-role="header">
                <div id="menuhead" class="selected">
                    <a href=""><img src="images/icons/icon-xalo.png" width="40px" height="30px"/></a>
                </div>
            </div>
            <div class="lMenu" >
                <a href="#chonngay" data-role="button"><img src="images/icons/ngaytot.png"/></a>
                <div class="textList">Chọn ngày tốt xấu</div>
            </div>
            <div class="lMenu">
                <a href="#doingay" data-role="button"><img src="images/icons/doilich.png"/></a>
                <div class="textList">Đổi lịch âm dương</div>
            </div>
            <div class="lMenu" >
                <a href="#sukien" data-role="button" class="sukien_btn"><img src="images/icons/laso.png"/></a>
                <div class="textList">Sự kiện</div>
            </div>
        </div>
        <div data-role="header">
            <div id="header">
                <a href="#navpanel">
                    <img src="images/icons/icon-xalo.png" width="40px" height="30px"/>
                </a>
                <a href="#home" style="float: right; margin-right: 10px">
                    <img src="images/icons/icon-home.png" width="40px" height="30px"/>
                </a>
            </div>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain" id="main_solar">
                <div id="main_solar_month_year">
                    <span id="main_solar_month" class="font3">Tháng 8</span>
                    <span id="main_solar_year" class="font3">Năm 2013</span>
                </div>
				
				<div class="clear"></div>
                
                <div id="main_solar_date" class="font1">21</div>
				
                <div id="main_solar_day" class="font3">Thứ 4</div>
            </div>
            <div data-role="fieldcontain" id="main_gio_tot"></div>
            <table id="main_lunar">
                <tr>
                    <td id="main_date">
                        <div class="font4"></div>
                        <div class="font5"></div>
                        <div class="font2"></div>
                        <div class="font5"></div>
                        <div class="font4"></div>
                    </td>
                    <td id="main_time">
                        <div class="font4"></div>
                        <div class="font5"></div>
                        <div class="font2"></div>
                        <div class="font5"></div>
                        <div class="font4"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Chon ngay tot xau -->

    <div data-role="page" id="chonngay">

        <!-- Side panel -->
        <div data-role="panel" id="navpanel" data-display="overlay" data-position="left" data-dismissable="true">
            <div data-role="header">
                <div id="menuhead" class="selected">
                    <a href=""><img src="images/icons/icon-xalo.png" width="40px" height="30px"/></a>
                </div>
            </div>
            <div class="lMenu">
                <a href="#chonngay" data-role="button" class="selected"><img src="images/icons/ngaytot.png"/></a>
                <div class="textList">Chọn ngày tốt xấu</div>
            </div>
            <div class="lMenu">
                <a href="#doingay" data-role="button"><img src="images/icons/doilich.png"/></a>
                <div class="textList">Đổi lịch âm dương</div>
            </div>
            <div class="lMenu" >
                <a href="#sukien" data-role="button" class="sukien_btn"><img src="images/icons/laso.png"/></a>
                <div class="textList">Sự kiện</div>
            </div>
        </div>

        <!-- Header -->

        <div data-role="header">
            <div id="header">
                <a href="#navpanel">
                    <img src="images/icons/icon-xalo.png" width="40px" height="30px"/>
                </a>
                <a href="#home" style="float: right; margin-right: 10px">
                    <img src="images/icons/icon-home.png" width="40px" height="30px"/>
                </a>
            </div>
        </div>

        <!-- Content -->

        <div data-role="content" id="chonngay_content">

            <div data-role="fieldcontain">
                <div id="chonngay_content_thoidiem" data-role="controlgroup" data-type="horizontal">
                    <select name="chonngay_thang" id="chonngay_thang"></select>
                    <select name="chonngay_nam" id="chonngay_nam"></select>
                </div>
                <fieldset data-role="controlgroup">
                    <select name="sukien" id="sukien">
                        <option value="1">Xuất hành, di chuyển</option>
                        <option value="2">Tố tụng,giải oan</option>
                        <option value="3">Động thổ</option>
                        <option value="7">Giao dịch, ký hợp đồng</option>
                        <option value="9">Khai trương</option>
                        <option value="11">Xây dựng, làm nhà, sửa nhà</option>
                        <option value="4">Cầu tài, lộc</option>
                        <option value="6">Tốt cho mọi việc</option>
                        <option value="8">Tế tự, tế lễ</option>
                        <option value="5">An táng, mai táng</option>
                        <option value="10">Hôn thú, giá thú</option>
                    </select>
                </fieldset>
                <button id="chonngay_ketqua" data-theme="b">Xem kết quả</button>
            </div>
            <div data-role="fieldcontain" id="chonngay_lich">
                <input name="datebox" data-theme="b" id="chonngay_datebox" data-role="datebox" 
                data-options='{"themeDatePick":"a", "themeDateToday":"a", "themeDate":"c", "mode":"calbox", "useNewStyle":true, "useInline":true, "hideInput":true}' />
                <!-- /Calendar -->
            </div>
        </div>
    </div>

    <!-- Ket qua xem ngay tot xau -->

    <div data-role="page" id="chonngay_result" data-close-btn="left">
        <div data-role="header" data-theme="b">
            <h1>Kết quả</h1>
        </div>

        <!-- Content -->

        <div data-role="content">
            <div id="simple_result"></div>
        </div>
    </div>

    <!-- Doi ngay am/duong -->
    <div data-role="page" id="doingay">
        <!-- Side Panel -->
        <div data-role="panel" id="navpanel" data-display="overlay" data-position="left" data-dismissable="true">
            <div data-role="header">
                <div id="menuhead" class="selected">
                    <a href=""><img src="images/icons/icon-xalo.png" width="40px" height="30px"/></a>
                </div>
            </div>
            <div class="lMenu">
                <a href="#chonngay" data-role="button"><img src="images/icons/ngaytot.png"/></a>
                <div class="textList">Chọn ngày tốt xấu</div>
            </div>
            <div class="lMenu">
                <a href="#doingay" data-role="button" class="selected"><img src="images/icons/doilich.png"/></a>
                <div class="textList">Đổi lịch âm dương</div>
            </div>
            <div class="lMenu" >
                <a href="#sukien" data-role="button" class="sukien_btn"><img src="images/icons/laso.png"/></a>
                <div class="textList">Sự kiện</div>
            </div>
        </div>

        <!-- Header -->

        <div data-role="header">
            <div id="header">
                <a id="bars-button" href="#navpanel">
                    <img src="images/icons/icon-xalo.png" width="40px" height="30px"/>
                </a>  
                <a href="#home" style="float: right; margin-right: 10px">
                    <img src="images/icons/icon-home.png" width="40px" height="30px"/>
                </a>
            </div>
        </div>

        <!-- Content -->

        <div data-role="content" id="doingay_content">
            <div data-role="fieldcontain">
                <div>
                    <input name="doingay_flipbox" id="doingay_flipbox" data-theme="a" id="datebox" data-role="datebox" 
                    data-options='{"userAltIcon":true,"themeButton":"a", "useHeader":false, "mode":"datebox", "useNewStyle":true, "useInline":true, "hideInput":true, "useSetButton": false}' />
                </div>

                <br />

                <fieldset id="doingay_radMode" data-role="controlgroup" data-type="horizontal" style="width:100%">
                    <input type="radio" name="doingay_selMode" value="0" id="doingay_selMode_0" />
                    <label for="doingay_selMode_0">Âm -> Dương</label>

                    <input type="radio" name="doingay_selMode" value="1" id="doingay_selMode_1" checked="true" />
                    <label for="doingay_selMode_1">Dương -> Âm</label>
                </fieldset>
                <button id="doingay_btnSubmit" data-theme="b" >Xem kết quả</button>
            </div>
            <div data-role="fieldcontain">
                <div id="doingay_result"></div>
            </div>
        </div>
    </div>
    
    <!-- Page Event -->
    
    <div data-role="page" id="sukien">
    	<div data-role="panel" id="navpanel" data-display="overlay" data-position="left" data-dismissable="true">
            <div data-role="header">
                <div id="menuhead" class="selected">
                    <a href=""><img src="images/icons/icon-xalo.png" width="40px" height="30px"/></a>
                </div>
            </div>
            <div class="lMenu">
                <a href="#chonngay" data-role="button"><img src="images/icons/ngaytot.png"/></a>
                <div class="textList">Chọn ngày tốt xấu</div>
            </div>
            <div class="lMenu">
                <a href="#doingay" data-role="button"><img src="images/icons/doilich.png"/></a>
                <div class="textList">Đổi lịch âm dương</div>
            </div>
            <div class="lMenu" >
                <a href="#sukien" data-role="button" class="sukien_btn selected"><img src="images/icons/laso.png"/></a>
                <div class="textList">Sự kiện</div>
            </div>
        </div>

        <!-- Header -->

        <div data-role="header">
            <div id="header">
                <a id="bars-button" href="#navpanel">
                    <img src="images/icons/icon-xalo.png" width="40px" height="30px"/>
                </a>  
                <a href="#home" style="float: right; margin-right: 10px">
                    <img src="images/icons/icon-home.png" width="40px" height="30px"/>
                </a>
            </div>
        </div>

        <!-- Content -->

        <div data-role="content" id="sukien_content">
        	<h1 style="text-align:center">Sự kiện của bạn</h1>
            <div id="ngayhomnay" style="text-align:center" ></div>
        	<div id="homnay" >Không có sự kiện nào ngày hôm nay</div>
            <div data-role="fieldcontain" id="sukien_lich">
                <input name="datebox" data-theme="b" id="sukien_datebox" data-role="datebox" 
                data-options='{"themeDateToday":"e", "themeDate":"c", "mode":"calbox", "useNewStyle":true, "useInline":true, "hideInput":true, "calHighPick":false}' />
                <!-- /Calendar -->
            </div>
        </div>
    </div>
    <div data-role="page" id="page_edit_event" >
    	<div data-role="header" data-theme="b">
			<h1>Sự kiện</h1>
		</div>
        
        <div data-role="content">
        	<div id="ngay_sukien" style="text-align:center"></div>
            <div style="text-align:center">---------------------</div>
            <div>Tên sự kiện</div>
            <textarea id="ten_sukien" ></textarea>
            <div>Nội dung sự kiện</div>
            <textarea id="noidung_sukien" ></textarea>
            <div id="save_event" data-role="button">Lưu</div>
            <div id="delete_event" data-role="button">Xóa</div>
        </div>
    </div>
</body>
</html>